<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body>
    <div
      class="flex items-center justify-between border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900"
    >
      <span> </span>

      <p class="text-center font-medium">
        Lorem, ipsum dolor
        <a href="#" class="inline-block underline"> sit amet consectetur </a>
      </p>

      <button
        type="button"
        aria-label="Dismiss"
        class="rounded border border-gray-300 bg-white p-1.5 shadow-sm transition-colors hover:bg-gray-50"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-5"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </body>
</html>
